<template>
  <el-container>
    <!-- 左侧内容区域 -->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- logo图标 -->
      <div class="logo">
        <img src="http://img.1314000.cn/logo.png" alt="" />
      </div>
      <!-- 菜单 -->
      <el-menu :default-openeds="['1']" :router="true">
        <!-- 一级菜单 -->
        <el-menu-item index="/admin/dashoard">
          <i class="el-icon-setting"></i>
          <span slot="title">后台首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-message"></i>
            用户管理
          </template>
          <el-menu-item index="/admin/user">用户列表</el-menu-item>
          <el-menu-item index="/admin/role">角色列表</el-menu-item>
          <el-menu-item index="/admin/auth">权限列表</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-message"></i>
            电影管理
          </template>
          <el-menu-item index="/admin/nowplaying">正在热映</el-menu-item>
          <el-menu-item index="/admin/comingsoon">即将上映</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-message"></i>
            订单管理
          </template>
          <el-menu-item index="/admin/order">订单列表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="clickDropdownItem">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">用户退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main class="mainbox">
        <!-- 右侧内容区域 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getMenuApi } from '@/api/commonApi'
export default {
  data() {
    return {
      menuData: []
    }
  },
  created() {
    this.getMenu()
  },
  methods: {
    async getMenu() {
      let ret = await getMenuApi()
      this.menuData = ret.data
    },
    clickDropdownItem(itemFlag) {
      console.log(this.$confirm)
      // 用户退出
      if ('logout' === itemFlag) {
        this.$confirm('您真的要退出本次登录吗？', '退出登录')
          .then(_ => {
            this.$store.commit('user/userLogout')
          })
          .catch(_ => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  background: #b3c0d1;
  line-height: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-container {
  min-height: 100%;
}
.mainbox {
  min-height: 100%;
  background-color: rgb(255, 255, 255);
}
.el-aside {
  color: #333;
}
</style>
